<template>
    <div>useStorage</div>
    <p>name: {{ obj.name }}</p>
</template>

<script setup>
import {useStorage, StorageSerializers} from '@vueuse/core'

// const obj = useStorage('obj', {name: 'mystic'}, {serializer: StorageSerializers.object});
// const obj = useStorage('obj', null, undefined, {serializer: StorageSerializers.object})
// obj.value = {
//     foo: 'bar'
// }
// console.log(obj);

// localStorage.setItem('obj', '{"name": "jack"}')
// const obj = useStorage('obj', {name: 'mystic', age: '18'}, localStorage, {mergeDefaults: true} );
// console.log(obj);

const obj = useStorage('obj', {name: 'red'}, sessionStorage)
console.log(obj)
</script>